<template>
	<!-- #ifdef H5	 -->
	<view :class="['mix-refresh-content',BackGround ]" :style="{
				transform: 'translateY('+ pageDeviation +'px)',
				transition: pageTransition + 's',
				height: 'calc(100% - ' + pageTop + 'px)',
				maxHeight: 'calc(100% - ' + pageTop + 'px)',
				top:num + 'rpx'
			}"
	 @touchstart="pageTouchstart" @touchmove="pageTouchmove" @touchend="pageTouchend">
		<!-- #endif -->
		<!-- #ifndef H5	 -->
		<view  :class="['mix-refresh-content',BackGround ]" :style="{
				transform: 'translateY('+ pageDeviation +'px)',
				transition: pageTransition + 's',
				height: 'calc(100vh - ' + pageTop + 'px)',
				maxHeight: 'calc(100vh - ' + pageTop + 'px)',
				top:num + 'rpx'
			}"
		 @touchstart="pageTouchstart" @touchmove="pageTouchmove" @touchend="pageTouchend">
			<!-- #endif -->

			<!-- 下拉刷新 -->
			<view class="mix-loading-wrapper">
				<text style="height: 70rpx;line-height: 70rpx;color: #7fc25d;">{{list[number].text}}</text>
				<!-- <image class="mix-loading-icon" :class="{active: refreshing, ready: refreshReady}" src="/static/images/uniapplogo.png">
				</image> -->
			</view>
			<scroll-view scroll-y scroll-with-animation enable-back-to-top :scroll-top="scrolltopa" @scrolltolower="loadMore"
			 @scroll="scroll" :style="[{height:'calc(100vh - ' + pageTop  + 'px)'}]">
				<slot></slot>
			</scroll-view>
		</view>
</template>

<script>
	let startY, moveY, windowHeight = 500,
		platform;
	let timeDiff = 0;
	let touchending;
	import {
		mapGetters
	} from 'vuex'
	export default {
		props: {
			top: {
				//距离顶部距离，单位upx
				type: Number,
				default: 0
			},
			num: {
				//距离顶部距离，单位upx
				type: Number,
				default: 100
			},
			scrolltopa: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				pageDeviation: 0, //下偏移量
				pageTransition: 0, //回弹过渡时间
				refreshReady: false, //进入刷新准备状态
				refreshing: false, // 进入刷新状态
				CustomBar: this.CustomBar,
				screenHeight: this.screenHeight,
				number:0,
				list:[
					{text:'奋斗没有终点，任何时候都是一个起点'},
					{text:'知识给人重量，成就给人光彩'},
					{text:'不去期望，失去了不会伤心，得到了便是惊喜'},
					{text:'每天的太阳都是新的，不要辜负了美好的晨光'},
					{text:'多讲点笑话，以幽默的态度处事'},
					{text:'一如既往，万事胜意'},
					{text:'今天将是你余生第一天'},
					{text:'人生如逆旅，我亦是行人'},
					{text:'永远年轻，永远热泪盈眶'},
					{text:'学会，走出痛苦迷区'},
					{text:'少壮不努力，老大徒伤悲'},
					{text:'锲而不舍,金石可镂'},
					{text:'吃得苦中苦，方为人上人'},
					{text:'先知三日，富贵十年'},
					{text:'人生最大的失败是放弃'},
					{text:'人无远虑，必有近忧'},
					{text:'不愤不启，不悱不发'},
					{text:'进思尽忠，退思补过'},
					{text:'成人不自在，自在不成人'},
					{text:'世上无难事，只怕有心人'},
					{text:'世上无难事，只怕有心人'},
				]
			};
		},
		computed: {
			...mapGetters([
				'BackGround', 'BackGroundBox'
			]),
			pageTop() {
				// return  (this.top / 2)
				return uni.upx2px(this.top);
			}
		},
		created() {
			uni.getSystemInfo({
				success: function(e) {
					platform = e.platform;
					windowHeight = e.windowHeight;
				}
			})
		},
		methods: {
			pageTouchstart(e) {
				touchending = false;
				this.pageTransition = 0;
				startY = e.touches[0].pageY;
			},
			pageTouchmove(e) {
				if (touchending) {
					return;
				}
				moveY = (e.touches[0].pageY - startY) * 0.4;
				if (moveY >= 0) {
					this.pageDeviation = moveY;

					this.$emit('setEnableScroll', false);
				}
				if (moveY >= 50 && this.refreshReady === false) {
					this.refreshReady = true;
				} else if (moveY < 50 && this.refreshReady === true) {
					this.refreshReady = false;
				}
				if (platform === 'ios' && e.touches[0].pageY > windowHeight + 10) {
					this.pageTouchend();
				}
			},
			pageTouchend() {
				touchending = true;
				if (moveY === 0) {
					return;
				}
				this.pageTransition = 0.3;
				if (moveY >= 50) {
					this.startPulldownRefresh();
				} else {
					this.pageDeviation = 0;
				}

				if (this.refreshReady === true) {
					this.refreshReady = false;
				}
				//修复下拉一点回弹后页面无法滚动的bug
				this.$emit('setEnableScroll', true);
				startY = moveY = 0;
			},
			//开启下拉刷新
			startPulldownRefresh() {
				if (+new Date() - timeDiff < 100) {
					return;
				}
				timeDiff = +new Date();
				this.refreshing = true;
				this.pageDeviation = uni.upx2px(90);
				this.$emit('refresh');
			},
			//结束下拉刷新
			endPulldownRefresh() {
				this.refreshing = false;
				this.pageDeviation = uni.upx2px(0);
				this.$emit('setEnableScroll', true);
				setTimeout(()=> {
					this.number = Math.floor(Math.random()*20+0);
				},500)
			},
			// 下拉刷新
			loadMore() {
				this.$emit('loadMore')
			},
			// 滚动位置决定点击回到顶部按钮显示
			scroll(e) {
				this.$emit('scroll', e)
			}
		}
	}
</script>

<style>
	.mix-refresh-content {
		display: flex;
		flex-direction: column;
		position: relative;
		/* top: 100rpx; */
	}


	/* 下拉刷新部分 */

	.mix-loading-wrapper {
		position: absolute;
		left: 0;
		top: 0;
		transform: translateY(-100%);
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.mix-loading-icon {
		width: 70upx;
		height: 70upx;
		transition: .3s;
	}

	.mix-loading-icon.ready {
		transform: scaleX(1.3);
	}

	.mix-loading-icon.active {
		animation: loading .5s ease-in infinite both alternate;
	}

	@keyframes loading {
		0% {
			transform: translateY(-20upx) scaleX(1);
		}

		100% {
			transform: translateY(4upx) scaleX(1.3);
		}
	}
</style>
